<template>
    <div class="teamWrap">
        <div class="title">添加成员<router-link  to="/open/team"><button class="new"><i class="el-icon-back"></i>返回</button></router-link></div>
        <el-form ref="form" :model="form" label-width="80px" :disabled="isWrite">
          <el-form-item label="账号(手机号)">
              <el-input v-model="form.phone" placeholder="请输入手机号" type="number"></el-input>
          </el-form-item>
          <el-form-item label="密码">
              <el-input v-model="form.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
              <el-input v-model="form.repe_pass" type="password"></el-input>
          </el-form-item>
          <div class="namewrap">
          <el-form-item label="姓名">
              <el-input v-model="form.name"></el-input>
          </el-form-item>
          </div>
          <div class="myRow">
               <span>性别</span><el-select v-model="form.sex" placeholder="请选择">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
          </div>
          <el-form-item label="职位">
              <el-input v-model="form.job"></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
              <el-input v-model="form.id_card" type="number"></el-input>
          </el-form-item>        
          <div class="onSubmit">          
            <el-form-item>
                <el-button type="primary" @click="onSubmit" icon="el-icon-upload">提交</el-button>
            </el-form-item>
          </div>
      </el-form>
    </div>
</template>

<script>
  import $　from 'jquery'
  import _　from 'underscore'
    export default {
        data() {
      return {
        form:{
          token:localStorage.getItem('token'),
          phone:'',
          password:'',
          repe_pass:'',
          sex:'男',
          name:'',
          id_card:''
        },
        isWrite:false
      }
    },
    activated(){
       $('.el-button--primary')[0].setAttribute("style","background-color: rgb(58, 19, 90) !important;border-color: rgb(58, 19, 90) !important")
     },
    methods: {
      onSubmit(){
         var hasEmpty=false
          _.each(this.form,(value)=>{
              if($.trim(value)==''){
                  hasEmpty=true
              }
          })
          if(hasEmpty){
              this.$message.error({message:'信息不能为空',duration:1000});
              return
          }
          if(this.form.password!=this.form.repe_pass){
              this.$message.error({message:'两次密码输入不一致',duration:1000});
              return
            }
                      const loading = this.$loading({
            lock: true,
            text: '成员添加中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
        this.$http.post(this.$store.getters.serverIp+'add_team_member',this.form).then((response)=>{
            if(response.data.success){
              loading.close();
              this.form={
          token:localStorage.getItem('token'),
          phone:'',
          password:'',
          repe_pass:'',
          sex:'男',
          name:'',
          id_card:''
        }
              this.$message.success({message:response.data.info,duration:1000})
              this.$router.push({path:'/open/team'})
            }else{
              loading.close();
              this.$message.error({message:response.data.info,duration:1000})
            }
        })
      }
    }
    }
</script>
<style lang="less" >
    .teamWrap{
         .el-form{
            width: 78%;
            margin: 0 auto;
            margin-top: 25px;
        }
        .logoWrap{
          position: relative;
        }
         .myRow{
          width: 39%;
          margin: 0 auto;
          margin-top: 31px;
          span{
            font-size: 14px;
            color: #606266;
            margin-right: 12px;
          }
        }
         .onSubmit{
            .el-form-item--small{
                border-top: 1px solid #ccc !important;
                text-align: center !important;
                width: 100% !important;
                margin-top: 60px !important;
            }
            .el-form-item__content{
                margin: 0 !important;
            }
            .el-button--primary{
                margin-top: 10px !important;
            }
        }
        .el-form-item__label{
            position: relative !important;
            top: 33px !important;
            width: 120px !important;
            left: -42px;
        }

        .el-form-item{
            width: 45%;
            margin: 0 auto;
        }
        .logoImg{
            margin-top: 19px;
            max-width:120px;
        }
        .el-table__header-wrapper{
        font-size: 22px !important;
        }
        tr.el-table__row {
            font-size: 18px;
        }
        .namewrap input {
            width: 32% !important;
        }
    }
</style>>